<template>
    <div>
        <transition name="mask">
            <div class="panel_mask" @touchmove.prevent @click="closePanel" v-show="show"></div>
        </transition> 
        <transition name="panel">
        <div class="price_panel" v-show="show" @touchmove.prevent>
            <div class="panel_header">
                <img class="close_icon" @click="closePanel" src="~@/assets/imgs/common/close_icon2.png">
                <span class="header_title  pf_m">商品价格</span>
            </div>
            <div class="input_block">
                <ul>
                    <li class="input_item px1bb" @click="changeInputIndex(0)">
                        <div class="item_left">
                            转手价格
                        </div>
                        <div class="item_right">
                            <span class="input_val pf_m" v-if="sellingPrice"><i>￥</i>{{sellingPrice}}</span>
                            <span class="init_val pf_m" v-else><i>￥</i>0.00 </span>
                            <key-cursor class="cursor_input" v-show="inputIndex == 0"></key-cursor>
                        </div>
                    </li>
                     <li class="input_item px1bb" @click="changeInputIndex(1)">
                        <div class="item_left">
                            入手价格
                        </div>
                        <div class="item_right">
                            <span class="input_val pf_m" :class="{'grey':sourceFrom == 'aishangjie'}" v-if="originalPrice"><i>￥</i>{{originalPrice}}</span>
                            <span class="init_val pf_m" v-else><i>￥</i>0.00 </span>
                            <key-cursor class="cursor_input" v-show="inputIndex == 1"></key-cursor>
                        </div>
                    </li>
                     <li class="input_item" @click="changeInputIndex(2)">
                        <div class="item_left">
                            运费<span>(选填)</span>
                        </div>
                        <div class="item_right">
                            <span class="input_val pf_m" v-if="postage"><i>￥</i>{{postage}}</span>
                            <span class="init_val pf_m" v-else><i>￥</i>0.00 </span>
                            <key-cursor class="cursor_input" v-show="inputIndex == 2"></key-cursor>
                        </div>
                    </li>
                </ul>

            </div>
            <numberKeyboard  ref="numberKeyboard" :focus="true" :point="true" @close="closePanel" @confirm="commitData" @keyClick="keyClick" :max-length="maxLength" ></numberKeyboard>
        </div>
        </transition> 
    </div>
</template>
<script>

import numberKeyboard from '@/components/numberKeyboard2.vue'
import keyCursor from '@/components/keyCursor.vue';
import { mapState, mapActions } from 'vuex'

export default {
    data: function () {
        return {
            isFocusing: false,
            numberKeyboardFlag: true,
            scrollTopFlag: 0,
            sellingPrice:'',
            originalPrice:'',
            postage:'',
            inputIndex:0,
            maxLength:8,
            sourceFrom:''
        }
    },
    props: {
        show: {
            type: Boolean,
            required: true
        },
        initData:{
            type:Object,
            default(){
                return {
                  sellingPrice: '',
                  originalPrice: '',
                  postage:''
                }
            }
        }
    },
    components: {
        numberKeyboard,
        keyCursor
    },
    created: function () {
           this.sourceFrom = this.$route.query.from || '';
    },
    methods: {
        ...mapActions(['showMsg', 'toggleLoading', 'updataLoadingZIndex']),

        // 关闭
        closePanel() {
            this.$emit('close');
        },
        // 确定
        commitData(){
            this.$emit('commit',{
                sellingPrice: this.sellingPrice,
                originalPrice: this.originalPrice,
                postage: this.postage,
            });
        },
        initInputValue(){
            this.sellingPrice = this.initData.sellingPrice;
            this.originalPrice = this.initData.originalPrice;
            this.postage = this.initData.postage;
        },
        triggerInput() {
            this.$refs.vcodeInput.focus();
        },
        inputFocus() {
            this.isFocusing = true;
        },
        inputBlur() {
            this.isFocusing = false;
        },
        changeInputIndex(i){
            if(i == 1){
                if(this.sourceFrom == 'aishangjie'){
                   return;
                }
            };
            if(this.inputIndex == i){
                return;
            };
            this.inputIndex = i;
            let val = '';
            if(i == 0){
                val = this.sellingPrice;
                this.maxLength = 8;
            }else if(i == 1){
                val = this.originalPrice;
                 this.maxLength = 8;
            }else if(i == 2){
                val = this.postage;
                 this.maxLength = 3;
            };
            this.$refs.numberKeyboard.setValue(val)
        },
    
        keyClick(val) {
            if(this.inputIndex == 0){
                this.sellingPrice = val;
            }
            if(this.inputIndex == 1){
                this.originalPrice = val;
            }
            if(this.inputIndex == 2){
                this.postage = val;
            }
        }
    },
    beforeDestroy() {
 
        this.updataLoadingZIndex(100);
    },
    watch: {
        
        show: function (newVal) {
            if (!newVal) {
                this.updataLoadingZIndex(100);
            } else {
                this.inputIndex = 0;
                this.maxLength = 8;
                this.$nextTick(()=>{
                    this.$refs.numberKeyboard.setValue(this.sellingPrice);
                })
                this.updataLoadingZIndex(200);
            }
        },
        isFocusing: function (val) {
            if (val) {
                this.scrollTopFlag = document.body.scrollTop;
            } else {
                document.body.scrollTop = this.scrollTopFlag;
            }
        }
    }
}	
</script>
<style scoped lang="less">


.price_panel {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 102;
  border-radius: 0.16rem 0.16rem 0 0 ;
  background-color: #fff;
}


@keyframes twinkle {
  0% {
    opacity: 0.2;
  }

  100% {
    opacity: 0.8;
  }
}

.input_block{

    .input_item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin:0 0.24rem;
        height: 0.96rem;
        // border-bottom: 0.02rem solid #ddd;
        &.px1bb{
            &::after{
                background-color: #eee;
            }
        }
        .item_left{
            font-size: 0.28rem;
            color: #333;
            line-height: 0.4rem;
            span{
              color: #999;
            }
        }
        .item_right{
            display: flex;
            align-items: center;
            padding-right: 0.1rem;
            .init_val{
                font-size: 0.32rem;
                color: #ccc;
                line-height: 0.4rem;
                i{
                   margin-right: -0.05rem;
                   font-style: normal;
                }
            }
            .input_val{
                font-size: 0.32rem;
                color: #333;
                line-height: 0.4rem;
                &.grey{
                    color: #ccc;
                }
                i{
                   margin-right: -0.05rem;
                   font-style: normal;
                }
            }
            .cursor_input{
              height: .28rem;
            }
        }
    }
    
}
.panel_header{
    height: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    .close_icon{
        position: absolute;
        left: 0.4rem;
        top: 0.46rem;
        width: 0.28rem;
        height: 0.28rem;
    }
    .header_title{
       flex: 1;
       text-align: center;
       line-height: 0.4rem;
       font-size: 0.32rem;
       color: #333;
    }
}
</style>